<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp" %>
<table class="globalText" width="100%">
	<tr>
		<td width="45%">
			<form id="configForm" target="tempFrame"  method="post" action="<c:url value='/project/saveProjectSellingUpload.html' />">
				<input type="hidden" id="codeString" name="codeString" />
				<input type="hidden" name="projectId" value="${project.id}" />
                <label>采集方式：</label>
                <input type="radio" name="uploadType" id="radio_by_CATEGORY" value="CATEGORY" onclick="setUploadType('CATEGORY')" /><label for="radio_by_CATEGORY">&nbsp;品类&nbsp;&nbsp;</label>
				<input type="radio" name="uploadType" id="radio_by_BRAND" value="BRAND" onclick="setUploadType('BRAND')" /><label for="radio_by_BRAND">&nbsp;品牌&nbsp;&nbsp;</label>
                <input type="radio" name="uploadType" id="radio_by_SKU" value="SKU" onclick="setUploadType('SKU')" /><label for="radio_by_SKU">&nbsp;SKU&nbsp;&nbsp;</label>
                <br/><br/>
                <label>采集数据：</label>
                <input type="checkbox" name="uploadSummary" id="check_summary" checked disabled/><label for="check_summary">&nbsp;销量&nbsp;&nbsp;</label>
                <input type="checkbox" name="uploadAmount" id="check_amount" onchange="updateUI()"/><label for="check_amount">&nbsp;数量</label>
                <select name="uploadAmountUnit" id="select_amountUnit" style="vertical-align: middle;">
                    <c:forEach var="unit" items="${amountUnitList}" varStatus="status"><option value="${unit.val}">${unit.text}</option></c:forEach>
                </select>
                &nbsp;&nbsp;<input type="checkbox" name="uploadPrice" id="check_price"/><label for="check_price" id="label_upload_price">&nbsp;单价&nbsp;</label>
            </form>
		</td>
	</tr>
	<tr>
		<td width="45%">
			<div style="width: 336px" class="content_wrap">
				<div class ="zTreeDemoBackgroundleft">
					<ul style="width: 100%" id="treePane" class="ztree"></ul>
				</div>
			</div>
			<div style="margin-top: 5px;">
				<input id="back" onclick="javascript:window.history.back();" type="button" class="btnStyle" value="返回">
				<input id="submit" onclick="javascript:storeProjectProducts();" style="margin-left: 10px;" type="button" class="btnStyle" value="提交">
			</div>
		</td>
	</tr>
</table>

<script type="text/javascript">
    var uploadType = '${project.sellingUpload.uploadType}';
    var uploadCodes = [<c:forEach var="code" items="${project.sellingUpload.codes}" varStatus="status">'<c:out value="${code}"/>',</c:forEach>];
    var uploadAmount = ${project.sellingUpload.uploadAmount == 1};
    var uploadAmountUnit = '${project.sellingUpload.uploadAmountUnit}';
    var uploadPrice = ${project.sellingUpload.uploadPrice == 1};
    var categoryData = ${json_category};
    var brandData = ${json_brand};
    var skuData = ${json_sku};
    var SU_AMOUNT_OR_PRICE_REQUIRED = '${SU_AMOUNT_OR_PRICE_REQUIRED}';
    var zNodes;
    var setting = {check: {enable: true}};

    function checkNode(values) {
        var tree = $.fn.zTree.getZTreeObj('treePane');
        for (var i = 0, n = values.length; i < n; i++) {
            var node = tree.getNodeByParam('code', values[i]);
            node && tree.checkNode(node, true, true);
        }
    }
    function storeProjectProducts() {
        if ($('#radio_by_SKU').prop('checked')) {
            if (!($('#check_amount').prop('checked') || $('#check_price').prop('checked'))) {
                alert(SU_AMOUNT_OR_PRICE_REQUIRED);
                return;
            }
        }
        var tree = $.fn.zTree.getZTreeObj('treePane');
        var nodes = tree.getCheckedNodes(true);
        var checkedCodeString = '';
        for (var i = 0, n = nodes.length; i < n; i++) {
            nodes[i].code && (checkedCodeString += nodes[i].code + ';');
        }
        $('#codeString').val(checkedCodeString);
        $('#configForm').submit();
        disableButtons(true);
    }
    function submitCallbackSuccess(data) {
        disableButtons(false);
        tabClick($('#productTab'));
    }
    function submitCallbackFailed() {
        disableButtons(false);
    }
    function disableButtons(setToDisabled) {
        $('#back').prop('disabled', setToDisabled);
        $('#submit').prop('disabled', setToDisabled);
    }
    function setUploadType(type) {
        switch (type) {
            case 'CATEGORY':
                zNodes = categoryData;
                break;
            case 'BRAND':
                zNodes = brandData;
                break;
            default:
                zNodes = skuData;
        }
        var treePane = $('#treePane');
        treePane.empty();
        $.fn.zTree.init(treePane, setting, zNodes);
        if (type === uploadType) {
            $('#check_amount').prop('checked', !!uploadAmount);
            $('#select_amountUnit').val(uploadAmountUnit);
            $('#check_price').prop('checked', !!uploadPrice);
            checkNode(uploadCodes);
        }
        updateUI();
    }
    function updateUI() {
        $('#select_amountUnit').prop('disabled', !$('#check_amount').prop('checked'));
        if ($('#radio_by_SKU').prop('checked')) {
            $('#check_price').show();
            $('#label_upload_price').show();
        } else {
            $('#check_price').hide();
            $('#label_upload_price').hide();
        }
    }

    var defaultUploadType = uploadType || 'SKU';
    $('#radio_by_' + defaultUploadType).prop('checked', true);
    setUploadType(defaultUploadType);
</script>
